<template>
    <div class="big">
        <van-sidebar v-model="activeKey"  class="nav">
            <van-sidebar-item v-for="(item ,index) in goodslist" :key="index" :title="item.name" @click="slide(index+'')"/>
        </van-sidebar>
        <div class="roll">
            <div class="rollMin" >
                <div class="classify" v-for="(item,index) in goodslist" :key="index" :id="index+''" >
                    <span class="food">{{item.name}}</span>
                    <div class="container" v-for="(v,i) in item.foods" :key="i" @click="transmit(v)">
                        <div class="container-box">
                            <div class="img"><img :src="v.imgUrl" alt=""></div>
                            <div class="details">
                                <p class="title">{{v.name}}</p>
                                <span class="activity">特惠</span>
                                <p class="quantity"><span class="salesVolume">月售{{v.sellCount}}份</span>&emsp;<span class="esteem">好评度{{v.rating}}%</span></p>
                                <div class="priceItem">
                                    <p class="Price">￥{{v.price}} <span class="Discount">￥{{v.price+10}}</span></p>
                                    <button class="option">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {goodsData} from "../../api/shopApi"
import { Component, Vue } from 'vue-property-decorator';
import Scroll from "better-scroll"

import {listData} from "../../utils/interface"
interface Point {
    idNewHeight: number,
    idOldHeight: number ,
    id: number,
}
@Component
export default class App extends Vue {
    activeKey: number = 0
    goodslist: Array<listData> = []
    Scroll: any = null;
    num: number = 0
    elY:any=[]
    async mounted() {
        let res = await goodsData()
        console.log(res);//后台数据
        this.goodslist = res.data.goodsList
        this.$nextTick(() => {
            this.Scroll = new Scroll(".roll", {
                probeType: 3,
                click: true,
                mouseWheel:true,
            })
            // console.log(this.getPoint);//滑动区间
            
            this.Scroll.on('scroll', (position:any) => {
                // console.log(position.x, position.y)
                let currentY = Math.abs(position.y)
                this.scrolls(currentY)
            })
        })
    }
    get getPoint():Array<Point> {
        let total: number = 0; 
        this.elY = this.goodslist.map((item, index) => {
            this.num += (document.getElementById(index + "")as any).offsetHeight
            let obj = {
                idNewHeight: this.num+total ,
                idOldHeight: total ,
                id: index,
            }
            total = this.num
            return obj
        })
        return this.elY
    }
    scrolls(Y: number) {
        this.getPoint.map((item: any, index: number) => {
            if (Y>=item.idOldHeight && Y<item.idNewHeight) {
                return this.activeKey = index
            }
        })
    }
    slide(index: string) {
        if (!index.includes("(")) {
            let i = document.getElementById(index)
            this.Scroll.scrollToElement(i,500)
        }
    }
    transmit(v:any) {
        let obj =  JSON.stringify(v)
        console.log(this.$router.push({
            path: "/detail",
            query:{obj}
        }));
    }
}
</script>

<style scoped lang="less">
.big{
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 562px;
    .van-sidebar{
        &::-webkit-scrollbar{
            width: 0;
        }
    }
    .nav{
        width: 120px;
    }
    .roll{
        overflow: auto;
    }
    .classify{
        width: 100%;
        height: 100%;
        // overflow: auto;
        flex: 1;
        background: #e7e8ea;
        margin: 4px 3px;
        border-radius: 6px;
        // &::-webkit-scrollbar{
        //     width: 0;
        // }
        .food{
            color: #818181;
            font-size: 14px;
            height: 20px;
            display: block;
        }
        .container{
            background-color: white;
            display: flex;
            padding: 10px;
            .container-box{
                display: flex;
                width: 100%;
                justify-content: flex-start;
                height: 120px;
            }
            .img{
                width: 100px;
                height: 100px;
                border-radius: 10px;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .details{
                flex: 1;
                .title{
                    font-size: 17px;
                    font-weight: 600;
                }
                .activity{
                    background-color: #eeeeee;
                    font-size: 13px;
                    display: block;
                    padding: 3px;
                    width: 26px;
                    margin: 7px 0;
                }
                .quantity{
                    color: #a9a9a9;
                    font-size: 13px;
                }
                .priceItem{
                    display:flex ;
                    justify-content: space-between;
                    position: relative;
                    .Price{
                        color: #f1471a;
                        font-size: 18px;
                        font-weight: 600;
                        .Discount{
                            font-size: 13px;
                            text-decoration: line-through;
                            color: #a0a0a0;
                            margin-left: 3px;
                        }
                    }
                    .option{
                        width: 30px;
                        height: 30px;
                        color: white;
                        position: absolute;
                        right: 6px; 
                        top:-9px;
                        padding: 6px;
                        background-color: #ffc300;
                        border: 0px;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
}
    
</style>
